<template>
	<view class="strengthe">
		<view class="backgroud"></view>
		<view class="form-content">
			<view class="form">
				<uni-section title="企业资料"   type="line">
					<view class="content">
						<uni-forms ref="form" :rules="rules" :modelValue="data">
							<uni-forms-item label="法人类型: " required>
								<uni-data-select :value="rangeValue" :localdata="range" 
										@change="change"  :clear="false"  />
							</uni-forms-item>
							<uni-forms-item  label="企业名称 : "  required name="name">
								<input class="input" type="text" v-model="data.name">
							</uni-forms-item>
							<uni-forms-item  label="显示名称 : " required name="name">
								<input class="input" type="text" v-model="data.name">
							</uni-forms-item>
							<uni-forms-item label="社会信用代码 : " required name='code'>
								<input type="text" placeholder="请输入18位统一社会信用"
									v-model="data.code">
							</uni-forms-item>
							<uni-forms-item label="注册时间 : " required >
								<picker mode="date" :value="data.time" :start="startDate" :end="endDate"
									@change="bindDateChange">
									 <view class="uni-input">{{data.time || '请选择工商注册时间'}}</view>
								 </picker>
							</uni-forms-item>
							<uni-forms-item label="注册资本 (万元) : " required name="capital">
								<input class="input" type="number" v-model="data.capital">
							</uni-forms-item>
							<uni-forms-item label="注册地区 : " required>
								<picker mode="region" :value="data.address" @change="changeAddress">
									 <view class="uni-input">{{data.address}}</view>
								</picker>
							</uni-forms-item>
							<uni-forms-item label="企业类型 : " required>
								<uni-data-select   :value="companyTypeValue"  :localdata="companyType"
									@change="changeType"  :clear="false"  ></uni-data-select>
							</uni-forms-item>
							<uni-forms-item label="企业业务:" required>
							</uni-forms-item>
						</uni-forms>
						<view class="box">
							<text class="text" v-for="item in classifyList" :key="item.id" 
									@click="addClassify(item)" :class="{active: item.active}">
								{{item.text}}
							</text>
						</view>
					</view>
				</uni-section>
			</view>
			<view class="next" @click="next">
				下一步
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rules:{
					name:{
							rules: [{
							required: true,
							errorMessage: '企业名称不能为空'
						}]
					},
					capital:{
						rules:[{
							required: true,
							errorMessage: '注册资本不能为空'
						},{
							format: 'number',
							errorMessage: '只能为数字'
						} ,{
							minimum:3,
							errorMessage: '注册资本最低 3 万元'
						} ]
					},
					code:{
						rules:[{
							required: true,
							errorMessage: '信用代码不能为空'
						},{
							format:'number'||'string',
							errorMessage: '只能输入数字，英文'
						} ]
					}
				},
				rangeValue:0,
				companyTypeValue:0,
				range:[
					{ value: 0, text: "非营利法人" },
					{ value: 1, text: "营利法人" },
					{ value: 2, text: "企业法人" },
					{value:3,text:'特别法人'}
					],
				
				companyType:[
					{ value: 0, text: "有限责任公司" },
				    { value: 1, text: "两合公司" },
					{ value: 2, text: "无限公司" },
					{value:3,text:'股份有限公司'},
					{ value: 4, text: "股份两合公司" }
					],
				classifyList:[
					{id:0,text:'月嫂',active:false},
					{id:1,text:'育婴师',active:false},
					{id:2,text:'保洁/清洁',active:false},
					{id:3,text:'保姆',active:false},
					{id:4,text:'产康师',active:false},
					{id:5,text:'早教/托育',active:false},
					{id:6,text:'养老/陪护',active:false},
					{id:7,text:'家装/搬家',active:false},
					],
				data:{
					legalPerson:'',
					name:'',
					code:'',
					time:'',
					capital:3,
					address:['湖南省','长沙市','岳麓区'],
					classifyActive:[],
					type:''
				}
			};
		},
		created() {
		},
		methods:{
			change(e){
				this.data.legalPerson=this.range.filter(obj=>obj.value===e).text
			},
			bindDateChange(e){
				this.data.time=e.detail.value
			},
			getDate(type) {
			    const date = new Date();
			    let year = date.getFullYear();
			    let month = date.getMonth() + 1;
			    let day = date.getDate();
	
			    if (type === 'start') {
			        year = year - 60;
			    } else if (type === 'end') {
			        year = year + 2;
			    }
			    month = month > 9 ? month : '0' + month;
			    day = day > 9 ? day : '0' + day;
			    return `${year}-${month}-${day}`;
			},
			changeAddress(e){
				this.data.address=e.detail.value.join('')
			},
			changeType(e){
				console.log(e);
				this.data.type=this.companyType.filter(obj=>obj.value===e).text
			},
			addClassify(item){
				const classIndex = this.data.classifyActive.findIndex(str=>str.id===item.id)
				if(classIndex < 0)  this.data.classifyActive.push(item) 
				else this.classifyActive = this.data.classifyActive.filter(obj=>obj.text != item.text)
				this.classifyList.forEach(obj=>{obj.id===item.id?obj.active=!obj.active:''})
			},
			next(){
				this.$refs.form.validate().then(res=>{
					if(!this.data.time.length)
						uni.showToast({
							icon:'none',
							title:'请选择注册时间',
						})
					else if(this.data.classifyActive.length===0){
						uni.showToast({
							icon:'none',
							title:'请选择公司业务',
						})
					}
					else{
						this.data.type=this.companyType.find(obj=>obj.value===this.companyTypeValue).text 
						this.data.legalPerson=this.range.find(obj=>obj.value===this.rangeValue).text
						
						console.log(this.data);
						uni.navigateBack({
							delta:1
						})
						uni.showToast({
							title:'注册成功',
						})
					}
				}).catch(err=>{
					console.log('err',err);
				})
			}
			
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		watch:{
			'data.code'(arr){
				this.$set(this.data,'code',arr.replace(/[\W]/g,'').trim())
			}
		}
	}
</script>

<style lang="scss">
.strengthe{
	font-size: 28rpx;
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	.backgroud{
		width: 100%;
		height: 80rpx;
		background-color: #3F51B5;
	}
	.form-content{
		position: absolute;
		top: 20rpx;
		left: 0rpx;
		right: 0rpx;
	}
	.form{
		margin: 20rpx;
		padding-bottom: 1rpx;
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
	}
	.content{
		margin: 0 34rpx 34rpx 40rpx;
		font-size: 26rpx;
		
		.uni-forms-item__content{
			display: flex;
			align-items: center;
			flex: none;
		}
		.uni-forms-item{
			display: flex;
			justify-content: space-between;
			border-top: 1rpx solid #eee;
			margin: 0;
			padding: 10rpx 0;
		}
		.uni-select {
			border: none;
			min-width: 220rpx;
		}
		.input{
			height: 100%;
			width: 100%;
		}
		
		.box{
			width: 100%;
			height: 140rpx ;
			display: flex;
			justify-content: start;
			align-items: center;
			flex-wrap: wrap;
			
			.text{
				display: inline-block;
				min-width: 60rpx;
				font-size: 20rpx;
				line-height: 45rpx;
				padding: 0 20rpx;
				color: #666;
				border: 1rpx solid #666;
				border-radius: 30rpx;
				margin-right: 30rpx;
				text-align: center;
			}
			.active{
				color: #fff;
				border: 1rpx solid #3F51B5;
				background-color: #3F51B5;
			}
		}
	}
	.next{

		line-height: 100rpx;
		text-align: center;
		background-color: #3F51B5;
		color: #fff;

	}
}
</style>
